<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="../../styles/index.css">
	<style>
		h4,
		p {
			margin: 0;
		}

		.box1 {
			width: 100px;
			height: 100px;
			background-color: pink;
		}

		.box2 {
			width: 200px;
			height: 200px;
			background-color: crimson;
			float: left;
		}

		.box3 {
			width: 300px;
			height: 300px;
			background-color: skyblue;
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="box1">box1</div>
		<div class="box2">
			<h4>box2，我是左浮动元素</h4>
		</div>
		<div class="box3">
			<h4>box3，只会影响后面的元素</h4>
			<p>文本不会被浮动元素覆盖，基于这个特性可以做这种文字环绕的效果！</p>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo soluta quas aut, voluptas quidem provident et?
				Vero, repudiandae?</p>
		</div>
	</div>
</body>

</html>